<template lang="">
  <div class="modifypsw-wrap">
    <mine-header>{{title}}</mine-header>
    <!-- 输入框 -->
          <form @submit.prevent="commit" class="form-list">
            <div class="form-item">
              <label for="password" class="iconfont icon-liaotian"></label>
              <input type="text" placeholder="请输入旧密码" v-model="pswData.password" @blur="oldpswchange" required>
            </div>
            <div class="form-item">
              <label for="newPassword" class="iconfont icon-liaotian"></label>
              <input type="text" placeholder="请输入新密码" v-model="pswData.newPassword" @blur="newpswchange" required>
            </div>
            <div class="form-item">
              <label for="verifyPassword" class="iconfont icon-liaotian"></label>
              <input type="text" placeholder="请在此输入新密码" v-model="pswData.verifyPassword" @blur="verifypswchange" required>
            </div>
          </form>
          <div class="commit">
            <button @click="btnAction">确认修改</button>
          </div>
  </div>
</template>
<script>
import MineHeader from "@/views/Mine/com/mine-header.vue"
import user from "@/store/modules/user";
import {modifyPswApi} from "@/api/mine"
import { Toast } from 'vant';
export default {
  name: "modifypsw",
  components: {
    [MineHeader.name]:MineHeader
  },
  data() {
    return {
      title:"修改密码",
      pswData: {
      password:"",
      newPassword:"",
      verifyPassword:"",
     }
    }
  },
  methods: {
    oldpswchange() {
      const element = this.pswData.password
      if (!(/^(?![0-9]+$)(?![a-z]+$)(?![^\da-z]+$)[^\u4E00-\u9FA5\s]{6,12}$/.test(element))) {
        Toast("密码长度为6-12位，而且由数字、字母、.任意两种组成");
      }
    },
    newpswchange() {
       const element = this.pswData.newPassword
      if (!(/^(?![0-9]+$)(?![a-z]+$)(?![^\da-z]+$)[^\u4E00-\u9FA5\s]{6,12}$/.test(element))) {
        Toast("密码长度为6-12位，而且由数字、字母、.任意两种组成");
      }
    },
 
    verifypswchange() {
       const element = this.pswData.verifyPassword
      if (!(/^(?![0-9]+$)(?![a-z]+$)(?![^\da-z]+$)[^\u4E00-\u9FA5\s]{6,12}$/.test(element))) {
        Toast("密码长度为6-12位，而且由数字、字母、.任意两种组成");
      }
    },
 
    async btnAction() {
      //点击确认按钮需要验证密码是否完整
      if (Object.values(this.pswData).filter(i => i.length).length < 3) {
        Toast("请完整每一项输入密码")
      } else { 
        //验证新旧密码是否相等
        if (this.pswData.newPassword != this.pswData.verifyPassword) {
          Toast("新密码两次输入不一致")
        }
        else {
            // 验证相等，发送请求
            const psd = {
              _id:user.state.userInfo._id,
              pswData:this.pswData
            }
            let res = await modifyPswApi(psd)
            Toast(`${res.data.message}`)
            this.pswData = {
            ...this.pswData,
            password:"",
            newPassword:"",
            verifyPassword:"",
           }
          }
        }
      } 
    }
  }


</script>
<style lang="scss" scoped>
  .modifypsw-wrap{
  width: 100%;
  height: 100%;
  background-color:#f4f6f9;
  position: absolute;
  top: 0;
  z-index: 9;
    .form-list{
      width: 100%;
      .form-item{
          height: 45px;
          display: flex;
          flex-direction: row;
          align-items: center;
          border-bottom: 1px solid #b3b4c7;
          border-top: 1px solid #b3b4c7;
          background-color: #fff;
          label{
            font-size: 24px;
            color: blue;
            padding: 10px;
            font-weight: 400;
            width: 40px;
            text-align: center;
          }
          input{
            flex: 1;
            font-size: 14px;
            color: #32354A;
            font-weight: 400;
            padding-right: 20px;
             height: 30px;
             border: 0;
             line-height: 100%;
            outline:medium
          }
      } 
  }
      .commit{
        width: 100%;
        padding-top: 15px;
        text-align: center;
        button{
        margin: auto;
        padding: 0;
        width: 274px;
        height: 44px;
        background-color: #4a73ff;
        color:#fff;
        border: 1px #4A73FF solid;
        border-radius: 5px;
        font-size: 16px;
      }
    }
  }
</style>